<template>
    <main-layout>
        <div class="wrapper">
            <div class="header">
                <div class="header-search">
                    <i class="search"></i>
                    搜索商品名称
                </div>
            </div>

            <div class="contener">
                <div class="left">
                    <div v-for="type in typesList"
                        :class="['item', type.active ? 'active' : '']"
                        @click="typeChange(type)"
                        :key="type.name">{{type.name}}
                    </div>
                </div>

                <div ref="content" class="right">

                    <div class="item" v-for="it in productList" :key="it.type">

                        <img :src="it.image" alt="" width="260px" height="80px">

                        <div class="no-wrap">
                            <div class="list" v-for="its in it.list" :key="its.title">
                                <div>{{its.title}}</div>
                            </div>
                        </div>

                        <div v-for="items in it.list" :key="items.title">

                            <span class="title" :ref="it.type">{{items.title}}</span>

                            <div class="row" v-for="item in items.category_list" :key="item.name">
                                <img :src="item.img" alt="" width="72px" height="72px">
                                <div class="right">
                                    <div class="name">{{item.name}}</div>
                                    <div class="price">￥<span>{{item.price}}</span>起</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    // 导入模拟服务器
    import MockService from '../../apis/typesApi'
    export default {
         data() {
            return {
                typesList:[],
                productList: [],
            }
        },
        
        created() {
            // 调用接口获取数据，但是页面分页组件也会调用接口，所以调用接口的方法应该抽取出去
            this.getList()
        },

        methods: {
            // 获取列表数据的方法
            async getList() {
                let result = await MockService.gettypesListApi()
                // console.log(result,'result 333333333333');

                // console.log(result.data.rows.types_list[0].title_list,'88888888888888888888888');

                if (result.code === 200) {
                    // 侧栏分类
                    let temp =  result.data.rows.types_list.map(it => {
                        return {name: it.type, value: it, active: false}
                    })

                    // temp.unshift({name: '推荐', value: '', active: true})
                    
                    this.typesList = temp
                    // console.log(this.typesList,'this.typesList 222');

                    // 商品
                    this.productList = result.data.rows.types_list.map(item =>{
                        return {list: item.title_list, type: item.type, image: item.image}
                    })
                    // this.productList = this.typesList[1].value.title_list
                    // console.log(this.productList,'this.productList //////');
                }
            },
            
            typeChange(type){
                // console.log(this.$refs[type.name][0].getBoundingClientRect().top);

                let Top = this.$refs[type.name][0].getBoundingClientRect().top

                this.$refs['content'].scrollTop = Top + this.$refs['content'].scrollTop - 225
                // this.$refs['content'].scrollTop = 1336 + this.$refs['content'].scrollTop - 50
                // console.log(this.$refs,'11111')
                 // 设置当前选中的类型
                this.typesList = this.typesList.map(it => {
                    it.active = it.name === type.name
                    return it
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .wrapper{
        // display: flex;
        background: #fff;
        height: 100%;
        .header {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            // background: #fff;
            z-index: 20;
            > .header-search{
                width: 350px;
                height: 35px;
                background: #f7f7f7;
                border-radius: 18px;
                display: flex;
                align-items: center;
                margin-left: 20px;
                color: #a6a6a6;
                font-size: 16px;
                .search{
                    background: url();
                    background-size: 23px 23px;
                    display: inline-block;
                    width: 35px;
                    height: 35px;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    background-position: 50%;
                }
            }
        }
        .contener{
            display: flex;
            > .left {
                flex: 0 0 100px;
                background-color: #fff;
                // background-color: red;
                overflow-x: hidden;
                > .item {
                position: relative;
                line-height: 49px;
                font-size: 700;
                font-size: .65rem;
                text-align: center;
                color: #666;
                cursor: pointer;
                user-select: none;
                &::after {
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 98px;
                    margin-top: -7px;
                    padding-top: 12px;
                    width: 0;
                    height: 0;
                    border: solid 1px;
                    border-color: #ff6700;
                }
                &.active {
                    background-color: #fff;
                    // color: #e40114;
                    color: black;
                    &::after {
                        content: '';
                    }
                }
            }
            }

            > .right {
                flex: 1;
                padding: 0 10px;
                background-color: #fff;
                height: 750px;
                overflow-x: hidden;
                overflow: auto;
                > .item {
                    overflow: hidden;
                    margin-bottom: 20px;
                    .no-wrap{
                        width: 500px;
                        white-space: nowrap;
                        height: 48px;
                        white-space: nowrap;
                        // overflow: hidden;
                        // overflow-x:scroll;
                        // overflow-y:hidden;
                        overflow: auto;
                        display: inline-block;
                        border-bottom: solid 1px rgb(223, 212, 212);
                        .list {
                            overflow-x:scroll;
                            overflow-y:hidden;
                            display: inline-block;
                            div {
                                white-space: nowrap;
                                color: #666;
                                // margin-right: 24px;
                                margin: 10px 24px 10px 0px;
                                font-size: 14px;
                                padding: 2px 2px;
                            }
                        }
                    }
                    .title {
                        display: block;
                        margin-top: 25px;
                        margin-bottom: 10px;
                        font-size: 16px;
                        text-align: left;
                        line-height: 20px;
                        font-weight: 700;
                        color: #333;
                    }
                    .row {
                        display: flex;
                        height: 70px;
                        margin: 10px 10px 0px 0px;
                        border-radius: 5px;
                        background: #f7f7f7;;
                        // background: #aeaeb1;
                        img {
                            display: block;
                            justify-content: center; 
                            align-items: center;                      
                        }
                        .right {
                            text-align: left;
                            font-size: 16px;
                            color: #333;
                            .name {
                                margin-left: 5px;
                                margin-top: 10px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .price {
                                display: flex;
                                align-items: center;
                                margin-left: 5px;
                                margin-top: 8px;
                                font-size: 12px;
                                span{
                                    display: block;
                                    font-size: 18px;
                                }
                            }
                        }
                        
                    }
                    
                }
            }
        }
    }
</style>